<template>
  <div>
    <el-row :gutter="5">
      <el-col :span="4">
        <el-select
          filterable
          v-model="productId"
          :placeholder="$t('product')"
          @change="listProductTemplate"
        >
          <el-option
            v-for="item in productList"
            :key="item.productId"
            :label="item.name"
            :value="item.productId"
          />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select
          v-model="type"
          :placeholder="$t('type')"
          @change="listProductTemplate"
        >
          <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select
          filterable
          v-model="keyName"
          :placeholder="$t('name')"
        >
          <el-option
            v-for="item in templateList"
            :key="item.keyName"
            :label="item.name"
            :value="item.keyName"
          />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select
          v-model="logic"
          :placeholder="$t('logic')"
        >
          <el-option
            v-for="item in logicList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-input
          v-model="value"
          clearable
          :placeholder="$t('value')"
        />
      </el-col>
      <el-col :span="2">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="search"
        />
      </el-col>
      <el-col :span="2">
        <el-button
          icon="el-icon-circle-close"
          @click="clean"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { failureNotice, listSearchLogic, listSearchType } from '@/util/common'
import { listProduct } from '@/api/iot/iotProductUserApi'
import { listProductTemplateExplain } from '@/api/iot/iotProductTemplateExplainApi'
import { listProductTemplateSetting } from '@/api/iot/iotProductTemplateSettingApi'
import { listProductTemplateParam } from '@/api/iot/iotProductTemplateParamApi'
import { getUserId } from '@/util/storage'
export default {
  name: 'UserDeviceSearch',
  data() {
    return {
      productList: [],
      productId: null,
      typeList: [],
      type: 'explain',
      templateList: [],
      logicList: [],
      logic: null,
      keyName: null,
      value: null,
      userId: getUserId()
    }
  },
  created() {
    this.listProduct()
    this.typeList = listSearchType(this)
    this.type = this.typeList[0].value
    this.logicList = listSearchLogic(this)
    this.logic = this.logicList[0].value
  },
  methods: {
    clean() {
      this.type = null
      this.logic = null
      this.keyName = null
      this.value = null
      this.search()
    },
    search() {
      this.$emit('change', {
        type: this.type,
        logic: this.logic,
        keyName: this.keyName,
        value: this.value
      })
    },
    listProduct() {
      listProduct({
        userId: this.userId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.productList = data
          this.productId = data[0].productId
          this.listProductTemplate()
        }
      })
    },
    listProductTemplate() {
      let r
      switch (this.type) {
        case 'explain':
          r = listProductTemplateExplain({
            productId: this.productId
          })
          break
        case 'setting':
          r = listProductTemplateSetting({
            productId: this.productId
          })
          break
        case 'param':
          r = listProductTemplateParam({
            productId: this.productId
          })
          break
        default:
          failureNotice(this)
      }
      r.then(res => {
        const { code, data } = res
        if (code === '200') {
          this.templateList = data
        }
      })
    }
  }
}
</script>


